Skip to main content

Dropdown field

The Dropdown Field component is a versatile and efficient tool designed for scenarios where users need to select a single option from a list. This component is particularly effective for applications that require a compact and organized way to present multiple choices, such as selecting a country, choosing a category, or picking a date range. By using a Dropdown Field, businesses can enhance the user experience by providing a clean and intuitive interface that maximizes the data-to-ink ratio, keeping the interface uncluttered while still offering a range of options. This component is optimal for lists with up to eight options, ensuring that users can make selections quickly and easily.

Properties​

To effectively utilize the Dropdown Field component, the following data and attributes are necessary:

  • Component-Level Attributes:
    • Code: A unique identifier for the Dropdown Field component, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the component.
    • Label: The text displayed beside the dropdown field, providing context and clarity to the user about the selection options.
  • Choice Attributes:
    • Code: A unique identifier for each dropdown option, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the specific option.
    • Label: The text displayed for each dropdown option, providing a clear description of what the option represents.
    • Help: An optional feature that displays help text beside the option through an icon, which can be shown when the user hovers over it, offering additional guidance or information.
  • Group Options:
    • "Add Empty Choice": An option to include an empty choice in the list, allowing users to undo a selection if needed.
    • Answer: Specifies a default answer that is preselected in the dropdown, with an arrow to reset the selection if needed.
    • Mandatory Field: A setting (default is OFF) that specifies whether the dropdown field requires an option to be selected. This ensures that users make a necessary selection before proceeding.
    • Help: An optional feature (default is OFF) that displays help text beside the group title, providing additional context or instructions for the entire group.
    • Enabled: A setting (default is ON) that determines whether the dropdown field is active and can be interacted with by the user. If disabled, the field is visually indicated as inactive, preventing user interaction.

By structuring the Dropdown Field component with these attributes, businesses can create a flexible and user-friendly interface that effectively captures user selections. The ability to customize options, provide help text, and control user interaction ensures that the component remains a powerful tool for enhancing application functionality and user experience.

Style​

Best Practices​

  • Clarity and Usability: Ensure the dropdown field is clearly labeled and provides a straightforward selection process. Use concise and descriptive options to help users make selections quickly.
  • Accessibility: Make sure the dropdown is accessible by providing labels and ensuring it can be navigated using keyboard shortcuts and screen readers.
  • Consistent Styling: Maintain consistent styling for dropdown fields across your application to create a cohesive user experience.

Highest Value Features​

  • Dropdown Customization: Customizing the appearance of the dropdown, including colors and fonts, enhances the visual appeal and usability.
  • Responsive Design: Ensure the dropdown field adapts well to different screen sizes, maintaining usability across devices.
  • Background and Border Styling: Customizing the background and border can improve the visibility and interaction feedback of the dropdown field.

All the Settings​

Border​

  • BORDER: Customize the border style, width, and color to define the outline and separation of the dropdown field. Use the following settings:
    • BORDER OPTIONS:
      • Style: solid, dashed, dotted, etc.
      • Width: specify the thickness of the border in pixels.
      • Color: choose a color using a color picker or HEX, RGBA, HSLA values.

Padding​

  • PADDING: Adjust the padding around the dropdown field to create space between the content and the border. Use the following settings:
    • PADDING OPTIONS:
      • Icon: all padding, top padding, left padding, bottom padding, right padding.
      • Size: in pixels using up and down arrows or by entering a numeric value.

Background​

  • BACKGROUND: Customize the background of the dropdown field using the following settings:
    • BACKGROUND OPTIONS:
      • Background Color: Set the background color using a color picker or enter values in HEX, RGBA, or HSLA format.
      • Image: Select an image from the media library or provide a URL for an online image.
      • Background Attachment: Choose how the background behaves with options like scroll, fixed, local, initial, or inherit.
      • Background Position X/Y: Adjust the position of the background image along the X-axis (horizontal) and Y-axis (vertical) using pixel values.
      • Background Repeat: Control how the background image repeats with options like repeat, repeat-x, repeat-y, no-repeat, initial, or inherit.
      • Background Size: Set the size of the background image to auto, cover, contain, or use specific dimensions.
      • Background Origin: Define the positioning area of the background with options like border-box, padding-box, content-box, initial, or inherit.

Label Font​

  • LABEL FONT: Customize the font of the label for the dropdown field using the following settings:
    • FONT OPTIONS:
      • Alignment: left, center, right, aligned.
      • Font type: choose from available font families.
      • Font-size: number expressed in px, em, or rem (where "em" is relative to the font size of the element itself, and "rem" is relative to the root element's font size).
      • Letter spacing: in pixels.
      • Line height: in pixels.
      • Style: normal, italic, oblique, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Weight: thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
      • Color: picker or values in HEX, RGBA, HSLA.
      • Stretch: Normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
      • Variant: normal, small caps, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Caps variant: normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial (inherits the browser’s default), inherit (inherits from the parent element).
    • Design System: By default this follows the "Label medium" on the active design system.

Answer Font​

  • ANSWER FONT: Customize the font of the selected option in the dropdown field using the following settings:
    • FONT OPTIONS: (same as above).

Input Field Border​

  • INPUTFIELD BORDER: Customize the border of the dropdown field using the following settings:
    • BORDER OPTIONS: (same as above).
  • Design System: By default with on focus this follows the "Accent one" on the active design system.

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively. An "em" is relative to the font size of the element itself, while a "rem" is relative to the font size of the root element (usually the <html> element).

This style guide provides a comprehensive overview of the styling options available for the Dropdown Field component in NoCode-X, ensuring users can create visually appealing and functional designs. Thank you for your patience, and I hope this meets your requirements!

Actions​

Event: On Change​

  • This action is executed whenever the dropdown field value is changed by the user.
  • It triggers actions or processes based on the newly selected value, enabling dynamic updates within the application.

Compatible functions​

  • Add dropdown choice
  • Get code of dropdown field
  • Get label of dropdown field
  • Get value of dropdown field
  • Remove dropdown choice
  • Set value of dropdown field
  • Get dropdown element by code